<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .weibo {
        width: 375px;
        height: 600px;
        border: 1px solid #000;
        position: relative;
      }

      header {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #000;
        text-align: center;
        /* 行高写百分比表示字体大小的百分比 */
        line-height: 50px;
      }

      .form {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        border-top: 1px solid #000;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }

      .item {
        width: 345px;
        height: 120px;
        border: 1px solid #000;
        margin: 15px;
        font-size: 14px;
      }

      h5 {
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <wei-bo></wei-bo>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      // 头部组件
      const WeiBoHeader = {
        template: `<header>微博头部</header>`,
      };

      // 列表item组件
      const WeiBoItem = {
        props: ["item"],
        template: `
          <div class="item">
            <h5>{{ item.title }}</h5>
            <p>{{ item.content }}</p>
            <button>点赞</button>
          </div>
        `,
      };

      // 内容组件
      const WeiBoList = {
        props: ["list"],
        template: `
          <div class="list">
            <wei-bo-item v-for="(item, index) in list" :key="index" :item="item"></wei-bo-item>
          </div>
        `,
        components: {
          WeiBoItem,
        },
      };

      // 表单组件
      const WeiBoForm = {
        template: `
          <div class="form">
            <input type="text" />
            <button>发送</button>
          </div>
        `,
      };

      // 最大的根组件
      const WeiBo = {
        data() {
          return {
            list: [
              {
                title: "震惊！！！",
                content:
                  "作为一个有十三四亿人的大国，没有进世界杯，我真替印度感到丢人",
              },
              {
                title: "可怜！！！",
                content:
                  "外国人真可怜，只能支持自己的国家，不像我们，想支持谁就支持谁",
              },
            ],
          };
        },
        template: `
          <div class="weibo">
            <wei-bo-header></wei-bo-header>
            <wei-bo-list :list="list"></wei-bo-list>
            <wei-bo-form></wei-bo-form>
          </div>
        `,
        components: {
          WeiBoHeader,
          WeiBoList,
          WeiBoForm,
        },
      };

      createApp({
        data() {
          return {};
        },
        components: {
          WeiBo,
        },
      }).mount("#app");
    </script>
  </body>
</html>
